<template>
    <div class="tablebox">
        <el-checkbox :label="item" v-for="(item,key) in rawDataKey" :key="item" @change="changeProcess($event,key)" :checked="true"/>
        <table border="1px solid #9B9B9B" cellspacing="0" cellpadding="5" id="proresstable" ref="exportTableRef">
            <thead ref="thead">
                <tr>
                    <td colspan="3" rowspan="3" leftTop="true">
                        <div>
                            <el-checkbox v-model="showMonth" label="月" size="small" border />
                            <el-checkbox v-model="showWeek" label="周" size="small" border />
                            <el-checkbox v-model="showDay" label="日" size="small" border />
                        </div>
                        <div>点击工序名导出</div>
                    </td>
                    <td class="weight" v-for="(item,index) in monthtype" :colspan="item.colspan" :key="index">{{ item.month }}</td>
                </tr>
                <tr>
                    <td class="weight" v-for="(item,index) in weektype" :colspan="item.colspan" :key="index">{{ item.week }}</td>
                </tr>
                <tr>
                    <td class="weight" v-for="(item,index) in daytype" :key="index">{{ item }}</td>
                </tr>
            </thead>
            <tbody ref="tbbody">
                <TableSlot
                v-for="(dataitem,index) in data"
                :key = "index"
                >
                    <tr v-for="(value,index) in datakey" :key="value.name" :datatype="dataitem.name" v-if="showMonth" :isShow="value.show">
                        <td :rowspan="rowspanNumber" class="weight processname" :datatype="dataitem.name"  @click="exportTableFunc(dataitem.name)" v-if="index===0">{{ dataitem.name }}</td>
                        <td class="weight">月</td>
                        <td class="weight">{{ rawDataKey[value] }}</td>
                        <td v-for="(item,key) in dataitem.monthdata" :colspan="item.colspan" :key="key" class="data">{{ item[value] }}</td>
                    </tr>
                    <tr v-for="(value,index) in datakey" :key="value" :datatype="dataitem.name" v-if="showWeek">
                        <td :rowspan="rowspanNumber" class="weight processname" :datatype="dataitem.name"  @click="exportTableFunc(dataitem.name)" v-if="(index===0)&&showMonth===false">{{ dataitem.name }}</td>
                        <td class="weight">周</td>
                        <td class="weight">{{ rawDataKey[value] }}</td>
                        <td v-for="(item,key) in dataitem.weekdata" :colspan="item.colspan" :key="key" class="data">{{ item[value] }}</td>
                    </tr>
                    <tr v-for="(value,index) in datakey" :key="value" :datatype="dataitem.name" v-if="showDay">
                        <td :rowspan="rowspanNumber" class="weight processname" :datatype="dataitem.name"  @click="exportTableFunc(dataitem.name)" v-if="(index===0)&&(showWeek===false)&&(showMonth===false)">{{ dataitem.name }}</td>
                        <td class="weight">日</td>
                        <td class="weight">{{ rawDataKey[value] }}</td>
                        <td v-for="(item,key) in dataitem.daydata"  :key="key" class="data">{{ item[value] }}</td>
                    </tr>
                </TableSlot>
            </tbody>
        </table>
    </div>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue';
import * as XLSX from 'xlsx';
import allData from '../components/tablePageComponent/mock.js';
import TableSlot from '../components/TableSlot.vue';

const data = ref({})
const rawDataKey = ref({})
const datakey = ref({})
const monthtype = ref([])
const weektype = ref([])
const daytype = ref([])
const exportTableRef = ref(null)
const tbbody = ref(null)
const thead = ref(null)
const exportTable = ref(null)
const showMonth = ref(true)
const showWeek = ref(true)
const showDay = ref(true)

const rowspanNumber = computed(()=>{
    console.log(Object.keys(datakey.value).length,'长度')
    let howMany = Object.keys(datakey.value).length
    let num = 0
    if(showDay.value){
        num = num+howMany
    }
    if(showWeek.value){
        num = num+howMany
    }
    if(showMonth.value){
        num = num+howMany
    }
    return num
})

const changeProcess = (el,val)=>{
            console.log(val)
    if(el){
        if(datakey.value.includes(val)){

        }else{
            datakey.value.push(val)
        }
    }else{
        if(datakey.value.includes(val)){
            datakey.value.forEach((item,index)=>{
                if(item===val){
                    datakey.value.splice(index,1)
                }
            })
        }else{

        }
    }
}

const getSameType = (datatype)=>{ // 寻找相同工序的数据
    const allChildren = tbbody.value.children // 获取所有tbody下的子元素节点
    
    let trueNode = [] // 用于存放相同工序的数据
    Array.from(allChildren).forEach(node=>{ // 寻找工序等于参数datatype的数据
        let newNode = node.cloneNode(true) // 克隆元素，以防在插入到新table时影响原页面
        let attris = node.attributes // 获取元素所有属性
        let isThatOne = false // 初始化是否是目标元素标识
        Array.from(attris).forEach(attri=>{ // 循环查找元素下的属性
            if(attri.nodeName === 'datatype'){ // 查找datatype属性
                if(attri.nodeValue===datatype){ // 判断datatype是否等于参数
                    isThatOne =  true
                }else{
                    isThatOne =  false
                }
            }
        })
        if(isThatOne){ // push相同工序的元素预先准备好的数组中
            trueNode.push(newNode)
        }
    })
    let tableElement = document.createElement('table') // 新建临时元素用于导出
    let tbodyElement = document.createElement('tbody')
    let theadElement = thead.value.cloneNode(true) // 克隆表头
    theadElement.children[0].children[0].colSpan=2 // 将表头纵向合并改为2格
    tableElement.appendChild(theadElement) // 插入表头
    trueNode.forEach(node=>{ // 插入数据至临时表体
        tbodyElement.appendChild(node)
    })
    tableElement.appendChild(tbodyElement) // 插入表体至临时表格
    exportTable.value = tableElement // 将临时表格赋值给状态
}

const exportTableFunc = (type)=>{
    getSameType(type) // 运行创建表格函数
    if(!exportTable.value){ // 临时表格状态是否为孔
        return
    }
    const wb = XLSX.utils.table_to_book(exportTable.value) // 导出临时表格
    XLSX.writeFile(wb,`${type}表格数据.xlsx`)
    exportTable.value = null // 将临时表格状态赋值为空以便下次导出
}

const getData = ()=>{
    let maxmonth = 0 // 用与比较月数据长度
    let maxmonthindex = 0 // 记录最长月数据下标
    let maxmontharr = [] // 放置所有的月份
    let maxweek = 0 // 用于比较周数据长度
    let maxweekindex = 0 // 记录最长周数据下标
    let maxweekarr = [] // 放置所有的周
    let maxday = 0 // 用于比较天数据长度
    let maxdayindex = 0 // 记录最长天数据下标
    let maxdayarr = [] // 放置所有的天
    data.value = allData.data
    // 比较长度记录下标
    allData.data.forEach((val,index)=>{
        if(val.monthdata.length>maxmonth){
            maxmonth = val.monthdata.length
            maxmonthindex = index
        }
        if(val.weekdata.length>maxweek){
            maxweek = val.weekdata.length
            maxweekindex = index
        }
        if(val.daydata.length>maxday){
            maxday = val.daydata.length
            maxdayindex = index
        }
    })
    // 存放最长数据
    allData.data[maxmonthindex].monthdata.forEach(val=>{
        maxmontharr.push({month:`${val.year}年${val.month}月`,colspan:val.colspan})
    })
    allData.data[maxweekindex].weekdata.forEach(val=>{
        maxweekarr.push({week:val.week,colspan:val.colspan})
    })
    allData.data[maxdayindex].daydata.forEach(val=>{
        maxdayarr.push(val.month+'月'+val.day)
    })
    monthtype.value = [...maxmontharr]
    weektype.value = [...maxweekarr]
    daytype.value = [...maxdayarr]
}
const getDatakey = ()=>{
    datakey.value = Array.from(Object.keys(allData.itemName))
    rawDataKey.value = {...allData.itemName}
}
getData()
getDatakey()

onMounted(()=>{
    // isShowMonth()
})
</script>

<style scoped>
table{
    background-color: #fff;
}
thead{
    position: sticky;
    top:0;
    background-color: rgba(213, 213, 213, 0.7);
    backdrop-filter: blur(4px);
}
td{
    min-width: 50px;
    max-width: 150px;
    text-align: center;
    width: auto;
    white-space: nowrap;
    padding: 5px;
}
td:hover{
    background-color: rgb(187, 187, 187);
}
tr:hover{
    background-color: rgb(238, 238, 238);
}
table{
    table-layout:fixed;
    word-break:break-all;
}
.tablebox{
    width: 100%;
    height: 100%;
    overflow: auto;
}
.tablebox::-webkit-scrollbar{
    width: 8px;
    height: 8px;
}
.tablebox::-webkit-scrollbar-thumb{
    background-color: rgb(156, 156, 156);
    border-radius: 4px;
}
.weight{
    font-weight: 600;
    color: rgb(91, 91, 91);
}
.processname{
    writing-mode : tb-rl ;
}
.el-checkbox{
    margin: 0 5px;
}
</style>
